<template>
  <div class="topNavBar">
    <Logo style="width: 200px" />
    <div style="display: flex; flex: 1; justify-content: space-between">
      <span class="closeBtn" @click="changeOpenStatus">关闭</span>
      <Setting />
    </div>
  </div>
</template>

<script>
import Logo from "./components/Logo.vue";
import Setting from "./components/Setting.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    Logo,
    Setting,
  },
  methods: {
    ...mapMutations(["changeOpenStatus"]),
    // changeOpen() {
    //   this.$store.commit("changeOpenStatus");
    // },
  },
};
</script>

<style lang="scss" scoped>
.topNavBar {
  height: 60px;
  background: black;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  line-height: 60px;
  .closeBtn {
    cursor: pointer;
  }
}
</style>